<template>
  <div>
    <music-lyric ref="lyric"></music-lyric>
    <div class="outside">
      <span class="lefts" ref="lefts">
        <div class="updetail">
          <i class="iconfont icon-xihuan" 
             v-show="islike" 
             @click="toggleLike(0)"
             style="color:var(--netease-color);"></i>
          <i class="iconfont icon-dan-like-outline" 
             v-show="!islike" 
             @click="toggleLike(1)"></i>
        </div>
        <div class="musicDetail" @click="turn">
          <img class="mimg" :src="MusicDetail.al.picUrl" v-if="MusicDetail">
          <div  v-if="MusicDetail">
            <span class="dspan">
              <span style="font-size:14px;color:var(--font-color)" v-show="!isplay">{{MusicDetail.name}}
                <em v-for="(item,i) in MusicDetail.alia" :key="i" style="color:rgb(153,153,153);font-size:13px">({{item}})</em>
              </span>
              <span style="font-size:14px;color:var(--font-color)" v-show="isplay">{{MusicDetail.name}}
                <em v-for="(item,i) in MusicDetail.alia" :key="i" style="color:rgb(153,153,153);font-size:13px">({{item}})</em>
              </span>
              <span style="font-size:14px;color:var(--font-color)" v-show="isplay">{{MusicDetail.name}}
                <em v-for="(item,i) in MusicDetail.alia" :key="i" style="color:rgb(153,153,153);font-size:13px">({{item}})</em>
              </span>
            </span>
            <span style="font-size:12px;color:var(--font-color)">{{conName(MusicDetail.ar)}}</span>
          </div>
        </div>
      </span>
      <div class="centers">
        <audio-player :music="musicUrl" class="audio" ref='audioplayer'></audio-player>
      </div>
      <div class="rights">
        <img src="~assets/img/standard.png" style="width:32.5px;height:20px;margin:0 12px">
        <img title="打开音效" src="~assets/img/yinXiao.png" style="width:24px;height:19px;margin:0 10px">
        <img title="静音" src="~assets/img/yinLiang.png" style="width:16.5px;height:21px;margin:0 9px" class="bright" v-show="!ismute" @click="mute">
        <img title="恢复音量" src="~assets/img/mute.png" style="width:19.5px;height:21px;margin:0 6px 0 9px" class="bright" v-show="ismute" @click="rmute">
        <el-slider v-model="value" :show-tooltip="false" @change="valueChange" class="el-sliders" :class="{muteclass:ismute}" title="音量调节"></el-slider>
        <img title="打开播放列表" src="~assets/img/showList.png" @click.prevent.stop="showPlayList" style="width:18px;height:16.8px;margin:0 23px" class="bright">
      </div>
      
    </div>
  </div>
  
</template>

<script>
// import Audios from 'components/content/audio'
// import Aplayer from 'vue-aplayer'
// import {mapGetters} from 'vuex'
// import {mapMutations} from 'vuex'
import audioPlayer from 'components/content/audio'
import musicLyric from './musicLyric.vue'
import {request} from 'network/request'
export default {
  name:'appBottom',
  data(){
    return{
      value:100,
      ismute:false,
      islike:false
      // MusicDetail:{
      //   name:null,
      //   al:{picUrl:''}
      // }
      // MusicDetail:{
      //   name:''
      // }
    }
  },
  components: {
    audioPlayer,
    musicLyric
  },
  computed:{
    musicUrl(){
      return this.$store.state.currentMusic
    },
    isplay(){
      return this.$store.state.isPlay
    },
    MusicDetail(){
      return this.$store.getters.getCurrentMusicDetail
    },
    // userId(){
    //   return this.$store.getters.getCurrentProfileId
    // }
  },
  methods:{
    showPlayList(){
      let width = this.$parent.$refs.playlist.$refs.playlists.style.width
      if(width === '420px'){
        this.$parent.$refs.playlist.$refs.playlists.style.width = '0px'
        document.documentElement.removeEventListener('click',this.playlistToggle)
      }else{
        this.$parent.$refs.playlist.$refs.playlists.style.width = '420px'
        document.documentElement.addEventListener('click',this.playlistToggle)
      }
    },
    playlistToggle(){
      this.$parent.$refs.playlist.$refs.playlists.style.width = '0px'
    },
    valueChange(){
      this.$refs.audioplayer.$refs.audio.volume = this.value/100
      localStorage.setItem('currentvolume',JSON.stringify(this.value))
      localStorage.setItem('ismute',JSON.stringify(this.ismute))
    },
    mute(){
      this.ismute = true
      this.$refs.audioplayer.$refs.audio.muted = true
      // this.value = 0
    },
    rmute(){
      this.ismute = false
      this.$refs.audioplayer.$refs.audio.muted = false
    },
    conName(ar){
      let arr=[]
      for(let item in ar ){
        arr.push(ar[item].name)
      }
      return arr.join('/')
    },
    turn(){
      this.$refs.lefts.style.bottom = (this.$refs.lefts.style.bottom === '-70px') ? '0px' : '-70px'
      this.$refs.lyric.$refs.lyric.style.display = 'block'
      this.$refs.lyric.$refs.lyric.style.top = '0px'
    },
    getVolume(){
      this.$mount()
      // console.log(this.$mount)
      if(localStorage.getItem('currentvolume') !== null){
        // console.log(this.$refs.audioplayer)
        if(localStorage.getItem('ismute') !== null){
          this.ismute =JSON.parse(localStorage.getItem('ismute'))
          this.$refs.audioplayer.$refs.audio.muted = this.ismute
        }
        this.value =JSON.parse(localStorage.getItem('currentvolume'))
        // console.log(this.$refs.audioplayer)
        this.$refs.audioplayer.$refs.audio.volume = this.value/100
      }
    },
    async toggleLike(index){
      if(index){
        const data = await request("GET",'like',{id:this.MusicDetail.id,like:true})
        if(data.code === 200){
          this.islike = true
        }
      }else{
        this.islike = false
        const data = await request("GET",'like',{id:this.MusicDetail.id,like:false})
      }
    },
  },
  mounted(){
    this.getVolume()
  }
}
</script>

<style scoped> 

.outside{
  position: fixed;
  bottom: 0;
  width: 100%;
  min-width: 880px;
  height: 72px;
  background-color: #fff;
  border-top: 1px solid rgb(225,225,225);
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index:1002;
}
.updetail{
  width:100%;
  height:50%;
  display: flex;
}
.updetail i{
  border-radius: 50%;
  border: 1px solid rgb(234,234,234);
  padding: 10px 10px 7px;
  margin-left: 20px;
  font-size: 20px;
  align-self: center;
  cursor: pointer;
}
.updetail i:hover{
  background-color: rgb(245,245,245);
}
.lefts{
  width: 200px;
  height: 140px;
  /* background-image: linear-gradient(#e66465, #9198e5); */
  transition: all .5s ease-in-out;
  bottom: 0;
  flex: 1;
  position: relative;
}
.musicDetail{
  padding: 10px 10px;
  display: flex;
}
.musicDetail div{
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-left: 10px;
  cursor: pointer;
}
.mimg{
  border-radius: 5px;
  width:50px;
  height:50px;
}
.mimg:hover{
  filter: blur(3px);
}
.musicDetail:hover::before,
.musicDetail:hover::after{
  display: block;
}
.musicDetail::before{
  display: none;
  border-radius: 5px;
  cursor: pointer;
  position: absolute;
  content:'';
  width: 50px;
  height: 50px;
  background-color: #000;
  opacity: .5;
}
.musicDetail::after{
  display: none;
  color: #fff;
  cursor: pointer;
  transform: translateX(25px) translateY(25px) translateX(-50%) translateY(-70%) scaleX(70%);
  content: '︿';
  position: absolute;
}
.dspan{
  width:150px;
  overflow:hidden;
  white-space:nowrap;
  position: relative;
  height: 20px;
}
.dspan span:nth-of-type(2){
  animation: rotaryBlockFirst 8s linear infinite;
  position: absolute;
}
.dspan span:nth-of-type(3){
  animation: rotaryBlockSecond 8s linear infinite;
  position: absolute;
}

@keyframes rotaryBlockFirst {
  0% { left: 0; }
  100% { left: -200%;}
}
@keyframes rotaryBlockSecond {
  0% { left: 200%; }
  100% { left: 0; }
}
.centers{
  flex:1;
  height: 100%;
  position: relative;
}
.rights{
  flex:1;
  display: flex;
  justify-content: flex-end;
  /* flex-direction:; */
  align-items: center;
  height: 100%;
}
.rights img{
  /* width: 20px; */
  /* margin: 0 20px; */
  cursor: pointer;
  /* height: 20px; */
}
.bright:hover{
  filter:brightness(130%);;
}
.el-sliders{
  width: 57px;
}
::v-deep .el-sliders .el-slider__runway:hover .el-slider__bar{
  height: 3px;
}
::v-deep .el-sliders .el-slider__runway:hover{
  height: 3px;
}
::v-deep .el-sliders .el-slider__button-wrapper{
  width: 10px;
  height: 10px;
  top:-3px
}
::v-deep .muteclass .el-slider__bar{
  display: none;
}
</style>